<template>
	<view class="article">
		<view class="title">
			<h1>{{video.current.title}}</h1>
		</view>
		<view class="author">
			<p>作者:{{video.current.author}}</p>
			<p>{{video.current.date}}</p>
		</view>
		<view class="content">
			<video id="myVideo" :src="video.current.url" autoplay=true vslide-gesture-in-fullscreen=true></video>
		</view>
	</view>
</template>

<script>
	import con from 'pages/const.js'
	export default {
		data() {
			return {
				id:0,
				video:{
					current:'',
					next:'',
					previous:''
				}
			}
		},
		onLoad(data) {
			this.id=data.id
			this.getArticle()
		},
		methods: {
			getArticle(){
				uni.request({
				    url: con.request_ip+'/resource/video/'+this.id,
					method:'GET',
					sslVerify:false,
				    success: (res) => {
						this.video =res.data
				    },
					fail: (res) => {
						uni.showToast({
						    'title':'请求失败,请下拉刷新'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
.article{
	position: relative;
	top: var(--status-bar-height);
}
.title{
	position: relative;
	font-size: 24rpx;
	text-align: center;
	padding: 22rpx 64rpx 22rpx 65rpx;
}
.author{
	margin:22rpx 32rpx 22rpx 32rpx;
	background-color: #f1f1f1;
	font-size: 32rpx;
	position: relative;
	border:solid #007aff;
	border-width: 0 0 0 22rpx;
	padding: 12rpx 64rpx 12rpx 64rpx;
}
.content{
	margin: 30rpx 32rpx 22rpx 32rpx;
}
video{
	width: 100%;
}
</style>
